/**
 * 学习目标：使用父传子技术-通信
 * 1. 父组件准备state数据
 * 2. 通过给子组件设置标签属性，来传数据
 * 3. 子组件通过props来接收数据
 *
 * 注意：state更新会导致子组件更新，同时更新界面
 */
import React from 'react';
import ReactDOM from 'react-dom';

class Child extends React.Component {
  render() {
    //  3. 子组件通过props来接收数据
    const { money } = this.props;
    return <div>爸爸给我钱了： {money}</div>;
  }
}

class App extends React.Component {
  // 1. 父组件准备state数据
  state = {
    money: 0,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        {/* 2. 通过给子组件设置标签属性，来传数据 */}
        <Child money={this.state.money}></Child>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
